<template>
  <Header></Header>

  <!-- 主内容区域 -->
  <main class="container max-w-screen-xl mx-auto p-4 px-6">
    <!-- grid 表格布局，分为 4 列 -->
    <div class="grid grid-cols-4 gap-7">
      <!-- 左边栏，占用 3 列 -->
      <div class="col-span-4 md:col-span-3 mb-3">
          <!-- 标签 -->
          <div v-if="tags && tags.length > 0"
              class="w-full p-5 pb-7 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
              <!-- 标签标题 -->
              <h2 class="flex items-center mb-5 font-bold text-gray-900 uppercase dark:text-white">
                  <!-- 标签图标 -->
                  <svg t="1698980289658" class="icon w-4 h-4 mr-2" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="13858" width="200" height="200">
                      <path
                          d="M646.4512 627.5584m-298.1888 0a298.1888 298.1888 0 1 0 596.3776 0 298.1888 298.1888 0 1 0-596.3776 0Z"
                          fill="#C7ACEF" p-id="13859"></path>
                      <path
                          d="M467.6096 962.5088c-34.4064 0-68.7616-13.1072-94.976-39.2704l-276.48-276.48c-52.3776-52.3776-52.3776-137.5744 0-189.9008L465.4592 87.552a105.216 105.216 0 0 1 76.8512-30.6176l308.6336 8.3456c55.3472 1.4848 100.096 46.0288 101.7856 101.376l9.5744 310.1696c0.8704 28.7744-10.2912 56.9344-30.6176 77.2608l-369.2032 369.2032c-26.112 26.112-60.4672 39.2192-94.8736 39.2192z m71.8848-844.1856c-11.4176 0-22.4768 4.5568-30.5664 12.6464L139.6224 500.2752c-28.416 28.416-28.416 74.6496 0 103.0144l276.48 276.48c28.416 28.416 74.6496 28.416 103.0144 0l369.2032-369.2032a43.4176 43.4176 0 0 0 12.6464-31.8976l-9.5744-310.1696c-0.7168-22.8864-19.2-41.2672-42.0352-41.8816l-308.6336-8.3456c-0.4608 0.0512-0.8192 0.0512-1.2288 0.0512z"
                          fill="#4F4F4F" p-id="13860"></path>
                      <path
                          d="M676.4032 445.5424c-62.208 0-112.8448-50.6368-112.8448-112.8448s50.6368-112.8448 112.8448-112.8448c62.208 0 112.8448 50.6368 112.8448 112.8448s-50.6368 112.8448-112.8448 112.8448z m0-164.1984c-28.3648 0-51.4048 23.04-51.4048 51.4048s23.04 51.4048 51.4048 51.4048c28.3648 0 51.4048-23.04 51.4048-51.4048s-23.0912-51.4048-51.4048-51.4048z"
                          fill="#4F4F4F" p-id="13861"></path>
                  </svg>
                  标签
                  <span class="ml-2 text-gray-600 font-normal dark:text-gray-300">( {{ tags.length }} )</span>
              </h2>
              
              <!-- 标签列表 -->
              <div class="flex flex-wrap gap-3">
                  <a v-for="(tag, index) in tags" :key="index" @click="goTagArticleListPage(tag.id, tag.name)" class="cursor-pointer inline-flex items-center px-3.5 py-1.5 text-xs font-medium text-center border rounded-[12px]
                                                hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-300 
                                                dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-800 
                                                dark:border-gray-700 dark:hover:text-white">
                      {{ tag.name }}
                      <span
                          class="inline-flex items-center justify-center w-4 h-4 ms-2 text-xs font-semibold text-sky-800 bg-sky-200 rounded-full">
                          {{ tag.articlesTotal }}
                      </span>
                  </a>
              </div>
          </div>
        
          <!-- 标签文章列表 -->
          <div
            class="p-5 mb-4 border border-gray-200 rounded-lg bg-white dark:bg-gray-800 dark:border-gray-700"
          >
            <h1
              class="flex items-center text-lg font-semibold text-gray-900 dark:text-white"
            >
              <!-- 标签图标 -->
              <svg
                t="1698980289658"
                class="icon w-5 h-5 mr-2"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="13858"
                width="200"
                height="200"
              >
                <path
                  d="M646.4512 627.5584m-298.1888 0a298.1888 298.1888 0 1 0 596.3776 0 298.1888 298.1888 0 1 0-596.3776 0Z"
                  fill="#C7ACEF"
                  p-id="13859"
                ></path>
                <path
                  d="M467.6096 962.5088c-34.4064 0-68.7616-13.1072-94.976-39.2704l-276.48-276.48c-52.3776-52.3776-52.3776-137.5744 0-189.9008L465.4592 87.552a105.216 105.216 0 0 1 76.8512-30.6176l308.6336 8.3456c55.3472 1.4848 100.096 46.0288 101.7856 101.376l9.5744 310.1696c0.8704 28.7744-10.2912 56.9344-30.6176 77.2608l-369.2032 369.2032c-26.112 26.112-60.4672 39.2192-94.8736 39.2192z m71.8848-844.1856c-11.4176 0-22.4768 4.5568-30.5664 12.6464L139.6224 500.2752c-28.416 28.416-28.416 74.6496 0 103.0144l276.48 276.48c28.416 28.416 74.6496 28.416 103.0144 0l369.2032-369.2032a43.4176 43.4176 0 0 0 12.6464-31.8976l-9.5744-310.1696c-0.7168-22.8864-19.2-41.2672-42.0352-41.8816l-308.6336-8.3456c-0.4608 0.0512-0.8192 0.0512-1.2288 0.0512z"
                  fill="#4F4F4F"
                  p-id="13860"
                ></path>
                <path
                  d="M676.4032 445.5424c-62.208 0-112.8448-50.6368-112.8448-112.8448s50.6368-112.8448 112.8448-112.8448c62.208 0 112.8448 50.6368 112.8448 112.8448s-50.6368 112.8448-112.8448 112.8448z m0-164.1984c-28.3648 0-51.4048 23.04-51.4048 51.4048s23.04 51.4048 51.4048 51.4048c28.3648 0 51.4048-23.04 51.4048-51.4048s-23.0912-51.4048-51.4048-51.4048z"
                  fill="#4F4F4F"
                  p-id="13861"
                ></path>
              </svg>
              {{ tagName }}
            </h1>
            <ol
              v-if="articles && articles.length > 0"
              class="mt-3 divide-y divider-gray-200 dark:divide-gray-700"
            >
              <li v-for="(article, index) in articles" :key="index">
                <a
                  href="#"
                  class="items-center block p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700"
                >
                  <img
                    class="w-24 h-12 mb-3 mr-3 rounded-lg sm:mb-0"
                    :src="article.cover"
                  />
                  <div class="text-gray-600 dark:text-gray-400">
                    <h2 class="text-base font-normal text-gray-900">
                      {{ article.title }}
                    </h2>
                    <span
                      class="inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400"
                    >
                      <svg
                        class="inline w-2.5 h-2.5 mr-2 text-gray-400 dark:text-white"
                        aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 20 20"
                      >
                        <path
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z"
                        />
                      </svg>
                      {{ article.createDate }}
                    </span>
                  </div>
                </a>
              </li>
            </ol>

            <!-- 该标签下没有文章提示，指定为 flex 布局，内容垂直水平居中，并纵向排列  -->
            <div v-else class="flex items-center justify-center flex-col">
              <svg
                height="300"
                node-id="1"
                sillyvg="true"
                template-height="600"
                template-width="600"
                version="1.1"
                viewBox="0 0 600 600"
                width="600"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
              >
                <defs node-id="58">
                  <linearGradient
                    gradientUnits="objectBoundingBox"
                    id="linearGradient-1"
                    node-id="5"
                    spreadMethod="pad"
                    x1="1.4458808"
                    x2="0.29515958"
                    y1="0.6691032"
                    y2="0.6732615"
                  >
                    <stop offset="0" stop-color="#e0e5ef" stop-opacity="0" />
                    <stop offset="1" stop-color="#e0e5ef" />
                  </linearGradient>
                  <linearGradient
                    gradientUnits="objectBoundingBox"
                    id="linearGradient-2"
                    node-id="8"
                    spreadMethod="pad"
                    x1="1.4458808"
                    x2="0.29515958"
                    y1="0.670017"
                    y2="0.67419773"
                  >
                    <stop offset="0" stop-color="#e0e5ef" stop-opacity="0" />
                    <stop offset="1" stop-color="#e0e5ef" />
                  </linearGradient>
                  <linearGradient
                    gradientUnits="objectBoundingBox"
                    id="linearGradient-3"
                    node-id="11"
                    spreadMethod="pad"
                    x1="0.9340618"
                    x2="0.40599936"
                    y1="0.988"
                    y2="1"
                  >
                    <stop offset="0" stop-color="#e0e5ef" stop-opacity="0" />
                    <stop offset="1" stop-color="#e0e5ef" />
                  </linearGradient>
                  <linearGradient
                    gradientUnits="objectBoundingBox"
                    id="linearGradient-4"
                    node-id="14"
                    spreadMethod="pad"
                    x1="0.9251822"
                    x2="0.40792233"
                    y1="0.988"
                    y2="1"
                  >
                    <stop offset="0" stop-color="#e0e5ef" stop-opacity="0" />
                    <stop offset="1" stop-color="#e0e5ef" />
                  </linearGradient>
                  <linearGradient
                    gradientUnits="objectBoundingBox"
                    id="linearGradient-5"
                    node-id="17"
                    spreadMethod="pad"
                    x1="0.5"
                    x2="0.5"
                    y1="1"
                    y2="-0.268682"
                  >
                    <stop offset="0" stop-color="#a2abb9" />
                    <stop offset="1" stop-color="#e7eaf0" />
                  </linearGradient>
                </defs>
                <g node-id="89">
                  <path
                    d="M 297.37 77.00 C 348.40 77.00 395.46 93.76 433.17 122.00 L 418.00 122.00 C 410.82 122.00 405.00 127.82 405.00 135.00 L 405.00 135.00 L 405.00 136.00 C 405.00 143.18 410.82 149.00 418.00 149.00 L 418.00 149.00 L 463.18 149.00 C 471.75 158.24 479.53 168.19 486.43 178.76 L 507.88 178.76 C 515.61 178.76 521.88 185.03 521.88 192.76 L 521.88 193.54 C 521.88 199.93 517.60 205.32 511.75 207.00 L 492.00 207.00 C 483.16 207.00 476.00 214.16 476.00 223.00 L 476.00 223.00 L 476.00 228.00 C 476.00 236.84 483.16 244.00 492.00 244.00 L 492.00 244.00 L 559.90 244.00 C 566.85 245.74 572.00 252.03 572.00 259.52 L 572.00 260.41 C 572.00 269.25 564.84 276.41 556.00 276.41 L 520.82 276.41 C 521.52 283.52 521.88 290.72 521.88 298.00 C 521.88 420.05 421.36 519.00 297.37 519.00 C 198.19 519.00 114.03 455.70 84.32 367.90 L 75.89 367.90 C 72.49 367.90 69.72 365.14 69.72 361.73 C 69.72 359.13 71.33 356.91 73.61 356.00 L 84.00 356.00 C 91.18 356.00 97.00 350.18 97.00 343.00 L 97.00 343.00 L 97.00 342.00 C 97.00 334.82 91.18 329.00 84.00 329.00 L 84.00 329.00 L 75.05 329.00 C 75.04 328.95 75.03 328.89 75.03 328.84 L 52.85 328.84 C 47.18 328.84 42.58 324.24 42.58 318.56 C 42.58 312.88 47.18 308.28 52.85 308.28 L 73.10 308.28 C 72.94 304.87 72.86 301.45 72.86 298.00 C 72.86 265.37 80.04 234.39 92.94 206.51 L 57.00 206.52 C 41.54 206.52 29.00 193.98 29.00 178.52 L 29.00 176.95 C 29.00 162.03 40.67 149.83 55.39 149.00 L 182.00 149.00 C 187.52 149.00 192.00 144.52 192.00 139.00 C 192.00 133.48 187.52 129.00 182.00 129.00 L 182.00 129.00 L 152.69 129.00 C 152.94 128.80 153.18 128.59 153.42 128.39 L 138.85 128.40 C 128.35 128.40 119.85 119.89 119.85 109.40 L 119.85 108.33 C 119.85 97.84 128.35 89.33 138.85 89.33 L 223.23 89.33 C 246.44 81.34 271.39 77.00 297.37 77.00 Z"
                    fill="#f3f3fa"
                    fill-opacity="0.6015942"
                    fill-rule="evenodd"
                    group-id="1"
                    id="背景"
                    node-id="21"
                    stroke="none"
                    target-height="442"
                    target-width="543"
                    target-x="29"
                    target-y="77"
                  />
                </g>
                <path
                  d="M 199.78 180.97 L 192.47 180.97 C 192.47 166.33 180.60 154.47 165.97 154.47 C 151.33 154.47 139.47 166.33 139.47 180.97 L 134.13 180.97 C 127.39 180.97 121.94 186.90 121.94 194.22 C 121.94 201.54 127.40 207.47 134.13 207.47 L 199.78 207.47 C 206.51 207.47 211.97 201.54 211.97 194.22 C 211.97 186.90 206.51 180.97 199.78 180.97 Z"
                  fill="url(#linearGradient-1)"
                  fill-rule="nonzero"
                  id="路径"
                  node-id="22"
                  stroke="none"
                  target-height="53"
                  target-width="90.034676"
                  target-x="121.93691"
                  target-y="154.4683"
                />
                <path
                  d="M 445.38 162.31 C 445.38 168.25 439.82 173.00 432.80 173.00 L 393.88 173.00 C 386.85 172.53 381.00 168.01 381.00 161.84 C 381.00 157.80 383.63 154.24 387.44 152.34 C 387.15 151.62 386.85 150.91 386.85 150.20 C 386.85 146.16 390.66 142.60 395.63 142.60 C 397.68 142.60 399.44 143.31 400.90 144.26 C 404.41 138.80 410.85 135.00 418.46 135.00 C 428.99 135.00 437.48 142.36 437.48 151.39 L 437.48 152.34 C 442.16 154.00 445.38 157.80 445.38 162.31 Z"
                  fill="url(#linearGradient-2)"
                  fill-rule="nonzero"
                  id="路径"
                  node-id="23"
                  stroke="none"
                  target-height="38"
                  target-width="64.379456"
                  target-x="381"
                  target-y="135"
                />
                <path
                  d="M 284.50 415.00 C 345.88 415.00 401.15 420.01 439.79 428.00 C 477.58 428.26 508.00 439.57 508.00 453.50 C 508.00 464.54 488.89 473.94 462.15 477.49 C 455.77 479.37 448.58 481.15 440.69 482.81 C 440.90 483.86 441.00 484.93 441.00 486.00 C 441.00 510.30 388.17 530.00 323.00 530.00 C 264.37 530.00 215.72 514.05 206.55 493.16 C 128.32 487.22 73.00 472.60 73.00 455.50 C 73.00 433.13 167.69 415.00 284.50 415.00 Z"
                  fill="#e7eaf0"
                  fill-rule="evenodd"
                  id="形状结合"
                  node-id="24"
                  stroke="none"
                  target-height="115"
                  target-width="435"
                  target-x="73"
                  target-y="415"
                />
                <path
                  d="M 284.00 466.10 C 284.00 471.07 268.55 475.10 249.50 475.10 C 230.45 475.10 215.00 471.07 215.00 466.10 C 215.00 461.13 230.45 457.10 249.50 457.10 C 268.55 457.10 284.00 461.13 284.00 466.10 Z"
                  fill="#d1d6e2"
                  fill-rule="nonzero"
                  id="椭圆形"
                  node-id="25"
                  stroke="none"
                  target-height="18"
                  target-width="69"
                  target-x="215"
                  target-y="457.09875"
                />
                <path
                  d="M 463.31 400.57 L 463.62 401.62 L 463.88 402.61 L 464.00 403.41 L 463.76 405.05 L 463.06 406.47 L 461.98 407.62 L 460.62 408.41 L 459.44 408.47 L 458.31 408.53 L 457.12 408.53 L 447.38 408.66 L 447.38 418.97 L 447.47 423.57 L 447.69 427.74 L 448.00 432.00 L 439.00 432.00 L 439.19 429.59 L 439.31 425.73 L 439.38 419.22 L 439.38 409.77 L 438.24 410.47 L 437.00 410.70 L 435.99 410.57 L 435.16 410.20 L 434.45 409.62 L 433.88 408.84 L 426.81 408.47 L 424.92 407.71 L 423.38 406.40 L 422.61 405.29 L 422.16 404.06 L 422.00 402.67 L 422.06 401.99 L 422.25 401.37 L 423.81 397.79 L 424.07 396.47 L 424.59 395.26 L 425.34 394.16 L 426.25 393.22 L 436.06 375.25 L 436.12 375.25 L 437.44 373.22 L 438.94 371.54 L 440.10 370.70 L 441.48 370.18 L 443.12 370.00 L 445.27 370.30 L 447.16 371.17 L 448.71 372.53 L 449.81 374.26 L 457.69 389.51 L 459.02 390.13 L 460.18 390.99 L 461.19 392.11 L 461.95 393.40 L 462.41 394.81 L 462.56 396.37 L 462.25 398.47 L 463.31 400.57 Z"
                  fill="url(#linearGradient-3)"
                  fill-rule="nonzero"
                  group-id="2"
                  id="路径"
                  node-id="27"
                  stroke="none"
                  target-height="62"
                  target-width="42"
                  target-x="422"
                  target-y="370"
                />
                <path
                  d="M 503.31 420.57 L 503.62 421.62 L 503.88 422.61 L 504.00 423.41 L 503.76 425.05 L 503.06 426.47 L 501.98 427.62 L 500.62 428.41 L 499.44 428.47 L 498.31 428.53 L 497.12 428.53 L 487.38 428.66 L 487.38 438.97 L 487.47 443.57 L 487.69 447.74 L 488.00 452.00 L 479.00 452.00 L 479.19 449.59 L 479.31 445.73 L 479.38 439.22 L 479.38 429.77 L 478.24 430.47 L 477.00 430.70 L 475.99 430.57 L 475.16 430.20 L 474.45 429.62 L 473.88 428.84 L 466.81 428.47 L 464.92 427.71 L 463.38 426.40 L 462.61 425.29 L 462.16 424.06 L 462.00 422.67 L 462.06 421.99 L 462.25 421.37 L 463.81 417.79 L 464.07 416.47 L 464.59 415.26 L 465.34 414.16 L 466.25 413.22 L 476.06 395.25 L 476.12 395.25 L 477.44 393.22 L 478.94 391.54 L 480.10 390.70 L 481.48 390.18 L 483.12 390.00 L 485.27 390.30 L 487.16 391.17 L 488.71 392.53 L 489.81 394.26 L 497.69 409.51 L 499.02 410.13 L 500.18 410.99 L 501.19 412.11 L 501.95 413.40 L 502.41 414.81 L 502.56 416.37 L 502.25 418.47 L 503.31 420.57 Z"
                  fill="url(#linearGradient-3)"
                  fill-rule="nonzero"
                  group-id="2"
                  id="路径"
                  node-id="28"
                  stroke="none"
                  target-height="62"
                  target-width="42"
                  target-x="462"
                  target-y="390"
                />
                <path
                  d="M 150.03 413.39 L 150.47 414.88 L 150.82 416.28 L 151.00 417.42 L 150.85 419.01 L 150.41 420.45 L 149.68 421.76 L 148.17 423.39 L 146.26 424.52 L 144.59 424.61 L 143.01 424.69 L 141.34 424.69 L 127.65 424.87 L 127.65 439.51 L 127.78 446.04 L 128.08 451.95 L 128.52 458.00 L 115.88 458.00 L 116.14 454.58 L 116.32 449.10 L 116.41 439.86 L 116.41 426.45 L 115.35 427.19 L 114.25 427.62 L 113.07 427.76 L 111.66 427.58 L 110.48 427.06 L 109.49 426.24 L 108.68 425.13 L 98.76 424.61 L 96.93 423.96 L 95.33 422.99 L 93.93 421.67 L 92.86 420.09 L 92.22 418.34 L 92.00 416.37 L 92.09 415.40 L 92.35 414.53 L 94.55 409.44 L 94.91 407.58 L 95.64 405.85 L 96.69 404.29 L 97.97 402.96 L 111.75 377.45 L 111.84 377.45 L 113.69 374.57 L 115.79 372.19 L 117.43 370.99 L 119.36 370.26 L 121.68 370.00 L 123.73 370.19 L 125.61 370.74 L 127.34 371.67 L 128.87 372.90 L 130.11 374.35 L 131.07 376.05 L 142.13 397.70 L 144.00 398.57 L 145.63 399.79 L 147.05 401.38 L 148.12 403.21 L 148.76 405.21 L 148.98 407.43 L 148.88 408.84 L 148.54 410.41 L 150.03 413.39 Z"
                  fill="url(#linearGradient-4)"
                  fill-rule="nonzero"
                  group-id="2"
                  id="路径"
                  node-id="29"
                  stroke="none"
                  target-height="88"
                  target-width="59"
                  target-x="92"
                  target-y="370"
                />
                <path
                  d="M 164.00 263.00 L 213.96 263.00 L 222.26 276.15 L 291.94 276.03 L 296.34 276.32 L 300.48 277.16 L 304.40 278.52 L 308.12 280.38 L 311.51 282.66 L 314.59 285.36 L 317.30 288.43 L 319.59 291.81 L 321.46 295.52 L 322.84 299.44 L 323.69 303.58 L 324.00 307.97 L 324.00 308.03 L 324.00 409.00 L 324.00 409.00 L 164.00 409.00 L 164.00 263.00 Z"
                  fill="#d9dfe8"
                  fill-rule="evenodd"
                  group-id="3"
                  id="矩形"
                  node-id="31"
                  stroke="none"
                  target-height="146"
                  target-width="160"
                  target-x="164"
                  target-y="263"
                />
                <path
                  d="M 181.00 295.00 L 311.00 295.00 L 311.00 439.00 L 181.00 439.00 Z"
                  fill="#a2abb9"
                  fill-rule="evenodd"
                  group-id="3"
                  id="矩形"
                  node-id="32"
                  stroke="none"
                  target-height="144"
                  target-width="130"
                  target-x="181"
                  target-y="295"
                />
                <path
                  d="M 178.00 309.00 L 314.00 309.00 L 314.00 436.00 L 178.00 436.00 Z"
                  fill="#ffffff"
                  fill-rule="evenodd"
                  group-id="3"
                  id="矩形"
                  node-id="33"
                  stroke="none"
                  target-height="127"
                  target-width="136"
                  target-x="178"
                  target-y="309"
                />
                <path
                  d="M 177.00 318.00 L 318.00 318.00 L 318.00 435.00 L 177.00 435.00 Z"
                  fill="#c8cede"
                  fill-rule="evenodd"
                  group-id="3"
                  id="矩形"
                  node-id="34"
                  stroke="none"
                  target-height="117"
                  target-width="141"
                  target-x="177"
                  target-y="318"
                />
                <path
                  d="M 151.00 331.00 L 341.00 331.00 L 323.73 439.00 L 168.27 439.00 Z"
                  fill="url(#linearGradient-5)"
                  fill-rule="nonzero"
                  group-id="3"
                  id="矩形"
                  node-id="35"
                  stroke="none"
                  target-height="108"
                  target-width="190"
                  target-x="151"
                  target-y="331"
                />
                <path
                  d="M 264.50 378.00 L 264.50 378.00 L 265.87 378.28 L 266.97 379.03 L 267.72 380.13 L 268.00 381.50 L 268.00 381.50 L 267.72 382.87 L 266.97 383.97 L 265.87 384.72 L 264.50 385.00 L 264.50 385.00 L 263.13 384.72 L 262.03 383.97 L 261.28 382.87 L 261.00 381.50 L 261.00 381.50 L 261.28 380.13 L 262.03 379.03 L 263.13 378.28 L 264.50 378.00 Z"
                  fill="#d9dfe8"
                  fill-rule="evenodd"
                  group-id="3"
                  id="矩形"
                  node-id="36"
                  stroke="none"
                  target-height="7"
                  target-width="7"
                  target-x="261"
                  target-y="378"
                />
                <path
                  d="M 278.50 378.00 L 302.50 378.00 L 303.87 378.28 L 304.97 379.03 L 305.72 380.13 L 306.00 381.50 L 306.00 381.50 L 305.72 382.87 L 304.97 383.97 L 303.87 384.72 L 302.50 385.00 L 278.50 385.00 L 277.13 384.72 L 276.03 383.97 L 275.28 382.87 L 275.00 381.50 L 275.00 381.50 L 275.28 380.13 L 276.03 379.03 L 277.13 378.28 L 278.50 378.00 Z"
                  fill="#d9dfe8"
                  fill-rule="evenodd"
                  group-id="3"
                  id="矩形"
                  node-id="37"
                  stroke="none"
                  target-height="7"
                  target-width="31"
                  target-x="275"
                  target-y="378"
                />
                <path
                  d="M 263.50 393.00 L 301.50 393.00 L 302.87 393.28 L 303.97 394.03 L 304.72 395.13 L 305.00 396.50 L 305.00 396.50 L 304.72 397.87 L 303.97 398.97 L 302.87 399.72 L 301.50 400.00 L 263.50 400.00 L 262.13 399.72 L 261.03 398.97 L 260.28 397.87 L 260.00 396.50 L 260.00 396.50 L 260.28 395.13 L 261.03 394.03 L 262.13 393.28 L 263.50 393.00 Z"
                  fill="#d9dfe8"
                  fill-rule="evenodd"
                  group-id="3"
                  id="矩形备份-2"
                  node-id="38"
                  stroke="none"
                  target-height="7"
                  target-width="45"
                  target-x="260"
                  target-y="393"
                />
                <path
                  d="M 251.00 256.00 L 250.75 258.74 L 250.06 261.25 L 248.95 263.57 L 247.46 265.68 L 245.68 267.46 L 243.57 268.95 L 241.25 270.06 L 238.74 270.75 L 236.00 271.00 L 233.26 270.75 L 230.75 270.06 L 228.43 268.95 L 226.32 267.46 L 224.54 265.68 L 223.05 263.57 L 221.94 261.25 L 221.25 258.74 L 221.00 256.00 L 221.25 253.26 L 221.94 250.75 L 223.05 248.43 L 224.54 246.32 L 226.32 244.54 L 228.43 243.05 L 230.75 241.94 L 233.26 241.25 L 236.00 241.00 L 238.74 241.25 L 241.25 241.94 L 243.57 243.05 L 245.68 244.54 L 247.46 246.32 L 248.95 248.43 L 250.06 250.75 L 250.75 253.26 L 251.00 256.00 Z"
                  fill="#d9dfe8"
                  fill-rule="evenodd"
                  group-id="3"
                  id="椭圆形"
                  node-id="39"
                  stroke="none"
                  target-height="30"
                  target-width="30"
                  target-x="221"
                  target-y="241"
                />
                <path
                  d="M 236.00 261.00 L 230.12 264.09 L 231.24 257.55 L 226.49 252.91 L 233.06 251.95 L 236.00 246.00 L 238.94 251.95 L 245.51 252.91 L 240.76 257.55 L 241.88 264.09 Z"
                  fill="#ffffff"
                  fill-rule="evenodd"
                  group-id="3"
                  id="星形"
                  node-id="40"
                  stroke="none"
                  target-height="18.09018"
                  target-width="19.021118"
                  target-x="226.48944"
                  target-y="246"
                />
                <path
                  d="M 376.00 255.00 L 375.70 259.40 L 374.85 263.53 L 373.49 267.46 L 371.62 271.17 L 369.34 274.55 L 366.63 277.63 L 363.55 280.34 L 360.17 282.62 L 356.46 284.49 L 352.53 285.85 L 348.40 286.70 L 344.00 287.00 L 339.60 286.70 L 335.47 285.85 L 331.54 284.49 L 327.83 282.62 L 324.45 280.34 L 321.37 277.63 L 318.66 274.55 L 316.38 271.17 L 314.51 267.46 L 313.15 263.53 L 312.30 259.40 L 312.00 255.00 L 312.30 250.60 L 313.15 246.47 L 314.51 242.54 L 316.38 238.83 L 318.66 235.45 L 321.37 232.37 L 324.45 229.66 L 327.83 227.38 L 331.54 225.51 L 335.47 224.15 L 339.60 223.30 L 344.00 223.00 L 348.40 223.30 L 352.53 224.15 L 356.46 225.51 L 360.17 227.38 L 363.55 229.66 L 366.63 232.37 L 369.34 235.45 L 371.62 238.83 L 373.49 242.54 L 374.85 246.47 L 375.70 250.60 L 376.00 255.00 Z"
                  fill="#c0c9db"
                  fill-rule="evenodd"
                  group-id="3"
                  id="椭圆形"
                  node-id="41"
                  stroke="none"
                  target-height="64"
                  target-width="64"
                  target-x="312"
                  target-y="223"
                />
                <path
                  d="M 342.00 261.38 L 342.00 257.12 L 344.00 257.12 L 345.66 256.89 L 347.07 256.28 L 348.27 255.29 L 349.20 254.02 L 349.77 252.53 L 350.00 250.75 L 350.00 248.62 L 349.77 246.85 L 349.20 245.35 L 348.27 244.08 L 347.07 243.10 L 345.66 242.49 L 344.00 242.25 L 342.34 242.49 L 340.93 243.10 L 339.73 244.08 L 338.80 245.35 L 338.23 246.85 L 338.00 248.62 L 338.00 250.75 L 334.00 250.75 L 334.00 248.62 L 334.17 246.65 L 334.62 244.87 L 335.35 243.23 L 336.34 241.73 L 337.52 240.47 L 338.92 239.43 L 340.47 238.66 L 342.15 238.18 L 344.00 238.00 L 345.85 238.18 L 347.53 238.66 L 349.08 239.43 L 350.48 240.47 L 351.66 241.73 L 352.65 243.23 L 353.38 244.87 L 353.83 246.65 L 354.00 248.62 L 354.00 250.75 L 353.71 253.27 L 352.95 255.49 L 351.73 257.47 L 350.10 259.14 L 348.21 260.36 L 346.00 261.16 L 346.00 265.62 L 342.00 265.62 L 342.00 261.38 L 342.00 261.38 Z M 342.00 267.75 L 346.00 267.75 L 346.00 272.00 L 342.00 272.00 L 342.00 267.75 Z"
                  fill="#ffffff"
                  fill-rule="nonzero"
                  group-id="3"
                  id="形状"
                  node-id="42"
                  stroke="none"
                  target-height="34"
                  target-width="20"
                  target-x="334"
                  target-y="238"
                />
                <path
                  d="M 373.91 331.58 L 371.92 327.03 L 370.24 322.22 L 368.96 318.28 L 368.55 316.70 L 368.26 314.97 L 368.00 311.56 L 368.03 310.97 L 368.21 310.48 L 368.55 310.20 L 368.96 310.09 L 370.78 310.05 L 372.56 310.49 L 374.25 311.32 L 375.92 312.47 L 378.99 315.25 L 381.39 318.06 L 383.68 321.47 L 385.72 325.15 L 387.56 329.11 L 389.19 333.18 L 390.56 337.18 L 390.95 340.07 L 391.00 341.85 L 390.84 343.60 L 390.38 345.19 L 389.59 346.31 L 388.50 346.91 L 387.37 346.97 L 386.21 346.65 L 385.01 346.03 L 382.86 344.51 L 380.83 342.69 L 379.06 340.66 L 377.52 338.50 L 376.28 336.48 L 374.55 333.08 L 373.91 331.58 Z"
                  fill="#a2abb9"
                  fill-rule="nonzero"
                  group-id="4"
                  id="路径"
                  node-id="44"
                  stroke="none"
                  target-height="36.924408"
                  target-width="22.992584"
                  target-x="368.0036"
                  target-y="310.04767"
                />
                <path
                  d="M 398.34 359.75 L 399.26 359.15 L 400.05 358.24 L 400.66 357.14 L 401.13 355.92 L 402.28 352.97 L 403.59 350.39 L 405.06 348.15 L 407.57 345.02 L 410.24 342.15 L 412.96 339.33 L 415.60 336.33 L 418.50 332.53 L 421.13 328.40 L 422.73 325.35 L 423.46 323.63 L 423.91 322.05 L 423.96 320.60 L 423.49 319.61 L 422.92 319.21 L 421.94 319.01 L 420.33 319.13 L 418.54 319.63 L 416.63 320.46 L 414.59 321.68 L 411.70 323.80 L 408.89 326.26 L 406.27 328.84 L 404.11 331.17 L 401.13 334.70 L 399.46 337.14 L 397.86 340.05 L 396.45 343.07 L 395.33 345.92 L 394.44 348.64 L 394.00 350.51 L 394.25 354.83 L 394.79 357.49 L 395.50 359.00 L 396.29 359.76 L 397.20 360.00 L 398.34 359.75 Z"
                  fill="#a2abb9"
                  fill-rule="nonzero"
                  group-id="4"
                  id="路径"
                  node-id="45"
                  stroke="none"
                  target-height="40.984985"
                  target-width="29.95758"
                  target-x="394"
                  target-y="319.01486"
                />
                <path
                  d="M 379.49 380.71 L 380.10 381.54 L 380.82 381.92 L 381.62 381.99 L 382.41 381.77 L 383.10 381.32 L 383.57 380.71 L 384.36 379.23 L 384.84 377.60 L 385.00 374.62 L 384.88 372.55 L 384.53 370.32 L 384.01 368.13 L 383.37 366.14 L 382.62 364.31 L 381.90 363.03 L 381.53 362.30 L 380.53 360.89 L 379.23 359.41 L 377.28 357.60 L 375.00 355.89 L 372.06 354.17 L 369.30 352.91 L 366.40 352.22 L 363.50 352.00 L 361.14 352.18 L 359.15 352.76 L 358.32 353.44 L 358.01 354.41 L 358.08 355.36 L 358.40 356.29 L 358.90 357.16 L 360.01 358.58 L 362.37 360.78 L 365.51 363.18 L 369.66 366.58 L 372.23 369.20 L 374.73 372.38 L 377.15 376.19 L 379.49 380.71 Z"
                  fill="#acb4c2"
                  fill-rule="nonzero"
                  group-id="4"
                  id="路径"
                  node-id="46"
                  stroke="none"
                  target-height="29.987915"
                  target-width="26.985718"
                  target-x="358.01428"
                  target-y="351.9996"
                />
                <path
                  d="M 420.56 343.34 L 423.17 342.07 L 424.35 341.44 L 425.67 340.89 L 428.72 339.87 L 430.94 339.39 L 434.56 339.04 L 438.06 339.10 L 439.39 339.42 L 439.91 339.87 L 439.96 340.57 L 439.60 341.41 L 438.67 342.49 L 436.92 343.93 L 434.61 345.50 L 430.05 348.23 L 427.34 350.01 L 424.88 351.66 L 422.55 353.53 L 418.56 357.32 L 415.78 360.14 L 414.82 361.27 L 413.86 362.72 L 412.16 365.60 L 410.80 367.89 L 409.28 369.98 L 407.87 371.28 L 407.08 371.73 L 406.25 371.97 L 405.28 371.93 L 404.35 371.54 L 403.54 370.86 L 402.89 369.89 L 402.22 368.13 L 402.01 366.70 L 402.20 363.35 L 402.49 361.53 L 403.08 359.50 L 403.51 358.64 L 403.93 358.14 L 405.10 356.83 L 406.25 355.50 L 406.78 354.90 L 407.03 354.31 L 407.31 353.05 L 407.53 352.41 L 408.00 351.71 L 409.15 350.47 L 410.92 348.69 L 412.16 347.67 L 413.92 346.81 L 416.19 345.55 L 417.93 344.63 L 420.56 343.34 Z"
                  fill="#909aa9"
                  fill-rule="nonzero"
                  group-id="4"
                  id="路径"
                  node-id="47"
                  stroke="none"
                  target-height="32.93387"
                  target-width="37.947357"
                  target-x="402.0098"
                  target-y="339.0409"
                />
                <path
                  d="M 413.92 374.61 L 415.54 373.15 L 417.29 371.98 L 421.00 370.03 L 423.35 369.03 L 425.64 368.57 L 427.94 368.63 L 430.67 369.17 L 432.03 369.21 L 433.41 368.81 L 433.84 368.41 L 433.81 367.93 L 433.53 367.19 L 432.94 365.97 L 432.23 364.54 L 431.28 363.33 L 430.11 362.31 L 428.78 361.53 L 427.31 361.00 L 425.73 360.74 L 423.83 360.79 L 421.93 361.16 L 419.98 361.87 L 417.28 363.43 L 414.83 365.52 L 412.78 368.01 L 411.14 370.78 L 409.91 373.75 L 409.09 376.78 L 408.92 378.46 L 409.19 380.03 L 409.44 380.34 L 409.82 380.44 L 410.49 380.02 L 411.35 378.88 L 412.06 377.61 L 413.50 375.10 L 413.92 374.61 Z"
                  fill="#9da5b5"
                  fill-rule="nonzero"
                  group-id="4,5"
                  id="路径"
                  node-id="48"
                  stroke="none"
                  target-height="19.704224"
                  target-width="24.921417"
                  target-x="408.91635"
                  target-y="360.7389"
                />
                <path
                  d="M 390.14 354.00 L 391.38 362.05 L 392.32 370.20 L 393.81 387.00 L 395.07 404.12 L 396.06 421.37 L 396.17 423.56 L 396.40 424.30 L 396.92 424.60 L 397.49 424.32 L 397.74 423.62 L 396.77 406.19 L 395.52 388.70 L 394.04 371.62 L 393.15 363.46 L 391.99 355.38 L 390.42 347.30 L 388.32 339.49 L 387.69 337.60 L 387.23 337.11 L 386.63 337.19 L 386.25 337.79 L 386.30 338.57 L 388.50 346.14 L 390.14 354.00 Z"
                  fill="#a2abb9"
                  fill-rule="nonzero"
                  group-id="4,6"
                  id="路径"
                  node-id="49"
                  stroke="none"
                  target-height="87.49216"
                  target-width="11.486877"
                  target-x="386.2541"
                  target-y="337.11166"
                />
                <path
                  d="M 399.79 348.58 L 396.69 356.31 L 394.12 364.42 L 392.05 372.95 L 390.51 381.70 L 389.42 391.44 L 388.91 401.27 L 388.93 411.12 L 389.44 420.94 L 389.63 423.32 L 389.97 423.95 L 390.57 424.08 L 391.04 423.63 L 391.16 422.83 L 390.57 413.26 L 390.44 403.64 L 390.80 394.03 L 391.72 384.48 L 393.11 375.69 L 395.05 367.10 L 397.42 359.17 L 400.28 351.58 L 402.50 346.66 L 404.95 341.97 L 407.61 337.53 L 408.68 335.92 L 408.92 335.20 L 408.72 334.47 L 408.17 334.15 L 407.87 334.20 L 407.61 334.43 L 404.78 338.89 L 402.17 343.60 L 399.79 348.58 Z"
                  fill="#a2abb9"
                  fill-rule="nonzero"
                  group-id="4,7"
                  id="路径"
                  node-id="50"
                  stroke="none"
                  target-height="89.92609"
                  target-width="20.01233"
                  target-x="388.90866"
                  target-y="334.14902"
                />
                <path
                  d="M 407.65 362.31 L 405.45 365.99 L 403.50 369.92 L 401.80 374.11 L 400.33 378.61 L 399.14 383.25 L 398.23 388.03 L 397.51 393.66 L 397.10 399.32 L 397.00 405.04 L 397.34 413.63 L 398.16 422.15 L 398.43 424.26 L 398.80 424.87 L 399.40 424.97 L 399.86 424.50 L 399.95 423.71 L 399.06 415.45 L 398.62 407.10 L 398.61 401.55 L 398.89 396.05 L 399.45 390.59 L 400.06 386.75 L 400.85 382.98 L 401.67 379.78 L 402.63 376.68 L 403.77 373.57 L 405.04 370.57 L 406.46 367.68 L 407.24 366.26 L 407.95 365.05 L 410.30 361.55 L 412.82 358.49 L 415.52 355.82 L 416.61 354.90 L 416.97 354.28 L 416.90 353.50 L 416.41 353.04 L 415.81 353.14 L 412.88 355.80 L 410.16 358.84 L 407.65 362.31 Z"
                  fill="#a2abb9"
                  fill-rule="nonzero"
                  group-id="4"
                  id="路径"
                  node-id="51"
                  stroke="none"
                  target-height="71.930725"
                  target-width="19.96933"
                  target-x="397.0023"
                  target-y="353.03717"
                />
                <path
                  d="M 409.04 378.10 L 406.80 382.84 L 404.86 387.84 L 403.22 393.10 L 401.91 398.52 L 400.94 404.05 L 400.31 409.67 L 400.02 415.15 L 400.07 420.64 L 400.14 421.97 L 400.39 422.70 L 400.64 422.93 L 400.96 423.00 L 401.54 422.69 L 401.78 421.97 L 401.64 416.54 L 401.84 411.10 L 402.07 408.36 L 402.13 407.71 L 402.15 407.54 L 402.13 407.66 L 402.14 407.57 L 402.19 407.16 L 403.22 400.43 L 404.41 395.10 L 405.92 389.93 L 406.02 389.62 L 406.08 389.47 L 406.11 389.38 L 406.10 389.40 L 406.09 389.43 L 406.12 389.34 L 406.17 389.18 L 406.29 388.84 L 407.70 385.11 L 409.86 380.31 L 412.34 375.77 L 412.66 375.25 L 412.70 375.18 L 412.65 375.26 L 412.73 375.14 L 412.91 374.85 L 413.59 373.80 L 415.76 370.74 L 416.00 370.01 L 415.76 369.29 L 415.18 369.00 L 414.60 369.29 L 411.68 373.52 L 409.04 378.10 Z"
                  fill="#a2abb9"
                  fill-rule="nonzero"
                  group-id="4"
                  id="路径"
                  node-id="52"
                  stroke="none"
                  target-height="53.99884"
                  target-width="15.979828"
                  target-x="400.02"
                  target-y="369.0002"
                />
                <path
                  d="M 376.17 368.89 L 376.36 369.18 L 376.43 369.28 L 376.45 369.32 L 376.48 369.37 L 377.18 370.48 L 378.53 372.80 L 380.93 377.58 L 383.00 382.63 L 383.11 382.92 L 383.14 383.00 L 383.11 382.92 L 383.17 383.09 L 383.86 385.07 L 384.69 387.67 L 386.17 393.06 L 387.43 398.57 L 388.49 404.18 L 389.38 409.86 L 389.68 411.95 L 389.73 412.32 L 389.76 412.55 L 390.14 415.42 L 390.83 421.12 L 391.00 422.53 L 391.26 423.24 L 391.51 423.46 L 391.82 423.52 L 392.38 423.20 L 392.59 422.47 L 391.11 410.71 L 389.21 399.30 L 388.00 393.73 L 386.56 388.26 L 384.83 382.87 L 382.79 377.68 L 380.42 372.74 L 377.73 368.14 L 376.89 366.88 L 376.63 366.66 L 376.32 366.60 L 375.77 366.92 L 375.57 367.65 L 375.81 368.36 L 376.17 368.89 Z"
                  fill="#a2abb9"
                  fill-rule="nonzero"
                  group-id="4,8"
                  id="路径"
                  node-id="53"
                  stroke="none"
                  target-height="56.921204"
                  target-width="17.021759"
                  target-x="375.567"
                  target-y="366.60376"
                />
                <path
                  d="M 400.43 411.72 L 403.32 417.29 L 404.31 418.81 L 404.87 419.43 L 405.46 419.84 L 406.13 420.00 L 406.79 419.83 L 407.34 419.37 L 407.78 418.50 L 408.00 416.36 L 407.93 411.22 L 407.63 406.12 L 407.04 401.09 L 406.11 396.32 L 404.76 391.75 L 402.98 387.61 L 401.72 385.60 L 400.24 383.91 L 398.57 382.61 L 397.08 382.04 L 396.15 382.05 L 395.36 382.47 L 394.65 383.40 L 394.25 384.57 L 394.02 386.48 L 394.10 389.41 L 394.94 395.24 L 396.38 401.03 L 398.28 406.63 L 400.43 411.72 Z"
                  fill="#acb4c2"
                  fill-rule="nonzero"
                  group-id="4"
                  id="路径"
                  node-id="54"
                  stroke="none"
                  target-height="37.964294"
                  target-width="13.975433"
                  target-x="394.0235"
                  target-y="382.03568"
                />
                <path
                  d="M 382.50 467.00 L 410.50 467.00 L 411.48 467.20 L 412.27 467.73 L 412.80 468.52 L 413.00 469.50 L 413.00 469.50 L 412.80 470.48 L 412.27 471.27 L 411.48 471.80 L 410.50 472.00 L 382.50 472.00 L 381.52 471.80 L 380.73 471.27 L 380.20 470.48 L 380.00 469.50 L 380.00 469.50 L 380.20 468.52 L 380.73 467.73 L 381.52 467.20 L 382.50 467.00 Z"
                  fill="#d1d6e2"
                  fill-rule="nonzero"
                  group-id="4"
                  id="矩形"
                  node-id="55"
                  stroke="none"
                  target-height="5"
                  target-width="33"
                  target-x="380"
                  target-y="467"
                />
                <path
                  d="M 386.81 423.00 L 408.19 423.00 L 409.82 423.23 L 411.22 423.81 L 412.43 424.76 L 413.38 425.97 L 413.96 427.37 L 414.19 429.00 L 414.14 429.75 L 409.83 463.75 L 409.45 465.21 L 408.80 466.45 L 407.85 467.50 L 406.68 468.31 L 405.37 468.81 L 403.88 469.00 L 391.12 469.00 L 389.63 468.81 L 388.32 468.31 L 387.15 467.50 L 386.20 466.45 L 385.55 465.21 L 385.17 463.75 L 380.86 429.75 L 380.88 428.11 L 381.28 426.65 L 382.07 425.32 L 383.15 424.24 L 384.47 423.48 L 386.05 423.05 L 386.81 423.00 Z"
                  fill="#c0c7d2"
                  fill-rule="evenodd"
                  group-id="4"
                  id="矩形"
                  node-id="56"
                  stroke="none"
                  target-height="46"
                  target-width="33.334473"
                  target-x="380.8566"
                  target-y="423"
                />
              </svg>
              <p class="mt-2 mb-16 text-gray-400">此标签下还未发布文章哟~</p>
            </div>
          </div>

          <!-- 分页 -->
          <nav
            aria-label="Page navigation example"
            class="mt-10 flex justify-center"
            v-if="articles.length >0"
          >
            <ul class="flex items-center -space-x-px h-10 text-base">
              <!-- 上一页 -->
              <li>
                <a
                  @click="getTagArticles(current - 1)"
                  class="flex items-center justify-center px-4 h-10 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                  :class="[current > 1 ? '' : 'cursor-not-allowed']"
                >
                  <span class="sr-only">上一页</span>
                  <svg
                    class="w-3 h-3"
                    aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 6 10"
                  >
                    <path
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M5 1 1 5l4 4"
                    />
                  </svg>
                </a>
              </li>
              <!-- 页码 -->
              <li v-for="(pageNo, index) in pages" :key="index">
                <a
                  @click="getTagArticles(pageNo)"
                  class="flex items-center justify-center px-4 h-10 leading-tight border dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                  :class="[
                    pageNo == current
                      ? 'text-blue-600  bg-blue-50 border-blue-300 hover:bg-blue-100 hover:text-blue-700'
                      : 'text-gray-500 border-gray-300 bg-white hover:bg-gray-100 hover:text-gray-700',
                  ]"
                >
                  {{ index + 1 }}
                </a>
              </li>
              <!-- 下一页 -->
              <li>
                <a
                  @click="getTagArticles(current + 1)"
                  class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                  :class="[current < pages ? '' : 'cursor-not-allowed']"
                >
                  <span class="sr-only">下一页</span>
                  <svg
                    class="w-3 h-3"
                    aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 6 10"
                  >
                    <path
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="m1 9 4-4-4-4"
                    />
                  </svg>
                </a>
              </li>
            </ul>
          </nav>
      
        </div>
  

      <!-- 右边侧边栏，占用一列 -->
      <aside class="col-span-4 md:col-span-1">
        <div class="sticky top-[5.5rem]">
          <!-- 博主信息 -->
          <UserInfoCard></UserInfoCard>

          <!-- 分类 -->
          <CategoryListCard></CategoryListCard>

          <!-- 标签 -->
          <TagListCard></TagListCard>
        </div>
      </aside>
    </div>
  </main>

  <Footer></Footer>
</template>

<script setup>
import Header from "@/layouts/frontend/components/Header.vue";
import Footer from "@/layouts/frontend/components/Footer.vue";
import UserInfoCard from "@/layouts/frontend/components/UserInfoCard.vue";
import TagListCard from "@/layouts/frontend/components/TagListCard.vue";
import CategoryListCard from "@/layouts/frontend/components/CategoryListCard.vue";
import { ref, watch } from "vue";
import { useRoute,useRouter} from "vue-router";
import { getTagArticlePageList,getTagList } from "@/api/frontend/tag";

const router = useRouter();
const route = useRoute();

// 所有标签
const tags = ref([]);
getTagList().then((res) => {
  if (res.success) {
    tags.value = res.data;
  }
});
  // 跳转标签文章列表页
const goTagArticleListPage = (id, name) => {
  // 跳转时通过 query 携带参数（标签 ID、标签名称）
  router.push({ path: '/tag/article/list', query: { id, name } })
}


// 文章集合
const articles = ref([]);
// 标签名称
const tagName = ref(route.query.name);
// 标签 ID
const tagId = ref(route.query.id);

// 监听路由
watch(route, (newRoute, oldRoute) => {
  tagName.value = newRoute.query.name;
  tagId.value = newRoute.query.id;
  getTagArticles(current.value);
});

// 当前页码
const current = ref(1);
// 每页显示的文章数
const size = ref(10);
// 总文章数
const total = ref(0);
// 总共多少页
const pages = ref(0);

function getTagArticles(currentNo) {
  // 上下页是否能点击判断，当要跳转上一页且页码小于 1 时，则不允许跳转；当要跳转下一页且页码大于总页数时，则不允许跳转
  if (currentNo < 1 || (pages.value > 0 && currentNo > pages.value)) return;
  // 调用分页接口渲染数据
  getTagArticlePageList({
    current: currentNo,
    size: size.value,
    id: tagId.value,
  }).then((res) => {
    if (res.success) {
      articles.value = res.data;
      current.value = res.current;
      size.value = res.size;
      total.value = res.total;
      pages.value = res.pages;
    }
  });
}
getTagArticles(current.value);


</script>
